// 总流程都写在App.vue里
// 1.在第2步data中定义数据
// 2.在第1步template中使用插值表达式直接使用data对象里面的值和内容
// 3.执行服务器yarn serve命令自动弹起浏览器看是否渲染成功


<template>
  <div id="app">
    <!-- 插值表达式 ，又称小胡子语法 -->
<!-- 直接使用data 对象内部的key -->
<!-- 例子1： -->
    <!-- {{msg}}
   年龄：{{age>18?'成年':'未成年'}} -->
   <!-- 年龄：成年 -->
   <!-- 粉丝数量:{{10000+num}}

   人物信息：
   姓名：{{person.name}}
   性别:{{person.sex}} -->
<!-- 例子2 -->
<!-- <a :href="url">跳转</a> -->

<!-- 头像：<img :src="imgUrl"> -->
<!-- 例子3 -->
<button v-on:click='subNum'>-</button>篮球：{{num}} <button v-on:click='num++'>+</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  //定义数据，要定义在data中
  data(){
    // return的对象内部 用来定义数据的 对象内部可以存任意数据

    // 例子1
//     return{
// msg:'hello vue',
// age:19,
// num:99,
// person:{
//   name:'张三',
//   sex:'女'
// }
//     }

// 例子2
// return {
//   url:'https://www.baidu.com',
//   imgUrl:'https://dfzximg02.dftoutiao.com/news/20211105/20211105133413_768722f067a565bc31e9a59e6a6305e7_2_mwpm_03201609.jpeg'
// }
// 例子3
return{
  num:3
}
  },
  methods:{
    subNum(){
      if(this.num===1){
        return alert('亲，不能在删除了哟')
      }
      this.num--
    }
  }
}

</script>

<style>
</style>
vuec
